<template>
  <div>
    <el-menu
      :collapse="stateIsCollapse"
      class="el-menu-vertical-demo"
      :router="true"
      active-text-color="#409eff"
      background-color="#324057"
      default-active="activeIndex2"
      text-color="#bbc7d4"
    >
      <div class="main-logo-wrap" :class="{ smallLogo: stateIsCollapse }">
        <div class="main-logo"></div>
      </div>
      <el-menu-item index="/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu
        :index="item.id"
        v-for="(item, index) of menulist.slice(1)"
        :key="index"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="(subItem, subIndex) of item.childMenu"
            :index="subItem.to"
            :key="`${index}-${subIndex}`"
            :to="subItem.to"
          >
            {{ subItem.title }}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { menu } from "@/api/menu";
import { State } from "vuex-class";

@Component({})
export default class MenuItem extends Vue {
  @State("isCollapse") stateIsCollapse: any;
  protected menulist = menu;
  protected isCollapse: boolean = false;
  protected activeIndex2: string = "1";
  protected name!: "MenuItem";

  created() {
    this.stateIsCollapse;
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-menu-item:hover,
.el-menu-item:focus {
  background-color: #48576a !important;
}

/deep/ .el-submenu__title:hover,
.el-submenu__title:focus {
  background-color: #48576a !important;
}

.menu-link {
  text-decoration: none;
  color: #bfcbd9;
}

/deep/ .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 400px;
}

.main-logo {
  width: 250px;
  height: 60px;
  background: url("../../assets/img/main/logo.png") no-repeat 30% 50%;
  background-size: auto 70%;

  .main-logo-wrap {
    width: 250px;
    height: 60px;
    line-height: 60px;
    background-color: black;
  }
}

.smallLogo {
  width: 50px;
  transform: translateX(0);
}
</style>
